<template>
	<view class="">
		<NavBar title="消息" :isShowLeftBtn="false">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<scroll-view scroll-y="true" :style="{height: viewHeight}" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list m_t_44" v-if="messageList.length>0">
					<view class="main_item m_t_32 m_b_22" v-for="(item,index) in messageList" :key="index">
						<view class="m_b_34" style="text-align: center;">
							<text class="f_26_0" style="color: #9C9B9B;">
								{{item.create_time}}
							</text>
						</view>
						<view class="main_item_list">
							<view class="main_item_item">
								<text class="f_26_0">
									{{item.memo}}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&messageList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
	</view>
	<Tabbar :activeTab="2"></Tabbar>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	import Tabbar from "@/components/tabbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const viewHeight = ref('')
	const statusBarHeight = ref(88)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 100 + 100}rpx - env(safe-area-inset-bottom))`
				viewHeight.value = `calc(100vh - ${statusBarHeight.value + 100 + 100}rpx - env(safe-area-inset-bottom))`
			}
		});
	})
	onShow(() => {
		initList()
	})
	const initList = () => {
		loadMessage.value = '加载中'
		page.value = 1
		messageList.value = []
		getMsgList()
	}
	// 审核消息列表
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		page.value = ++page.value;
		loadShow.value = true;
		setTimeout(() => {
			getMsgList()
		}, 1000)
	}
	const messageList = ref([])
	const getMsgList = async () => {
		if (loadMessage.value == '没有更多了') {
			loadShow.value = true;
			setTimeout(() => {
				loadShow.value = false;
			}, 200)
			return
		}
		let res = await proxy.$http('salesMan.getMsgList', { page: page.value })
		let data = res.data.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				messageList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F2F2F2;
		padding: 32rpx 20rpx;
		padding-bottom: 64rpx;

		.main {
			.main_list {
				.main_item {
					.main_item_list {
						.main_item_item {
							width: 654rpx;
							padding: 40rpx 28rpx;
							background: #FFFFFF;
							box-shadow: 2rpx 6rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
							border-radius: 10rpx;
							border: 1px solid #EDEDEE;
						}
					}
				}
			}
		}

	}
</style>